<script lang="ts" setup>
import { ref } from "vue";

const dataList = ref<any>([
  {
    name: "练课(每周2次) 艺术:线上创意课+线下美术馆参观",
    marketPrice: "￥100.00",
    salesPrice: "￥100.00",
    stock: 1000,
  }, {
    name: "蒙氏教具操作(每天30分钟) 运动",
    marketPrice: "￥100.00",
    salesPrice: "￥100.00",
    stock: 1000,
  }
]);

const modalVisible = ref(false);

const handleAction = (action: string) => {
  if (action === 'add') {
    modalVisible.value = true;
  }
};
</script>

<template>
  <umrp-container bg-color="#f2f2f2" height="100%" padding="16px" :gap="16">
    <umrp-breadcrumb :items="['商品管理', '商品列表', '商品表单']"></umrp-breadcrumb>
    <umrp-card :border="false">
      <template #extra>
        <umrp-space :size="10">
          <umrp-button type="primary">保存</umrp-button>
          <umrp-button type="primary">返回</umrp-button>
        </umrp-space>
      </template>
      <umrp-tabs default-active-tab="1">
        <umrp-tab-panel key="1" title="商品信息">
          <umrp-container padding="16px 0">
            <umrp-form>
              <umrp-form-item label="商品主图">
                <umrp-upload></umrp-upload>
              </umrp-form-item>
              <umrp-form-item label="商品详情图">
                <umrp-upload></umrp-upload>
              </umrp-form-item>
              <umrp-form-item label="商品名称">
                <umrp-input></umrp-input>
              </umrp-form-item>
              <umrp-form-item label="商品市场价">
                <umrp-input-number :default-value="0"></umrp-input-number>
              </umrp-form-item>
              <umrp-form-item label="商品价格">
                <umrp-input-number :default-value="0"></umrp-input-number>
              </umrp-form-item>
              <umrp-form-item label="商品库存">
                <umrp-input-number :default-value="0"></umrp-input-number>
              </umrp-form-item>
              <umrp-form-item label="商品标签">
                <umrp-select mode="multiple">
                  <umrp-option value="1">早教</umrp-option>
                  <umrp-option value="2">篮球</umrp-option>
                </umrp-select>
              </umrp-form-item>
            </umrp-form>
          </umrp-container>
        </umrp-tab-panel>
        <umrp-tab-panel key="2" title="商品规格">
          <umrp-container padding="16px 0">
            <umrp-table :data="dataList" :action-bar="true" @action="handleAction">
              <template #columns>
                <umrp-table-column title="序号" data-index="id"></umrp-table-column>
                <umrp-table-column title="SKU头图" slot-name="cover"></umrp-table-column>
                <umrp-table-column title="SKU名称" data-index="name"></umrp-table-column>
                <umrp-table-column title="市场价格" data-index="marketPrice"></umrp-table-column>
                <umrp-table-column title="购买价格" data-index="salesPrice"></umrp-table-column>
                <umrp-table-column title="库存" data-index="stock"></umrp-table-column>
                <umrp-table-column title="操作" slot-name="action" :width="120"></umrp-table-column>
              </template>
              <template #cover>
                <umrp-image :width="50" :height="50"></umrp-image>
              </template>
              <template #action>
                <umrp-space :size="10">
                  <umrp-button type="primary" @click="modalVisible = true">编辑</umrp-button>
                  <umrp-popconfirm message="您确认删除么？">
                    <umrp-button type="danger">移除</umrp-button>
                  </umrp-popconfirm>
                </umrp-space>
              </template>
            </umrp-table>
          </umrp-container>
        </umrp-tab-panel>
      </umrp-tabs>
    </umrp-card>
    <umrp-modal v-model:visible="modalVisible" :width="500">
      <umrp-container padding="24px 0">
        <umrp-form>
          <umrp-form-item label="SKU主图">
            <umrp-upload></umrp-upload>
          </umrp-form-item>
          <umrp-form-item label="SKU名称">
            <umrp-input></umrp-input>
          </umrp-form-item>
          <umrp-form-item label="市场价格">
            <umrp-input-number :default-value="0"></umrp-input-number>
          </umrp-form-item>
          <umrp-form-item label="购买价格">
            <umrp-input-number :default-value="0"></umrp-input-number>
          </umrp-form-item>
          <umrp-form-item label="库存">
            <umrp-input-number :default-value="0"></umrp-input-number>
          </umrp-form-item>
        </umrp-form>
      </umrp-container>
    </umrp-modal>
  </umrp-container>
</template>